HTML Table colspan and rowspan
In HTML tables, colspan and rowspan are attributes used to span a cell across multiple columns or rows, respectively.
Table Colspan
- colspan is an attribute used to specify the number of columns that a cell should span horizontally.
- It allows a single cell to occupy space across multiple adjacent columns within a table row.
- The value of colspan indicates the number of columns that the cell should span.
Example-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table colspan</title>
</head>
<body>
<table border="1">
<tr>
<td>Cell 1</td>
<td colspan="2">Spanned Cell</td>
<td>Cell 4</td>
</tr>
</table>
</body>
</html>Output-
| Cell 1 | Spanned Cell | Cell 4 |
Table Rowspan
- rowspan is an attribute used to specify the number of rows that a cell should span vertically.
- It allows a single cell to occupy space across multiple adjacent rows within a table column.
- The value of rowspan indicates the number of rows that the cell should span.
Example-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table rowspan</title>
</head>
<body>
<table border="1">
<tr>
<td rowspan="2">Spanned Cell</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</table>
</body>
</html>Output-
| Spanned Cell | Cell 2 | Cell 3 |
| Cell 5 | Cell 6 |
Using colspan and rowspan attributes allows for more complex table layouts and designs, where cells can span across multiple rows or columns, providing flexibility in organizing and presenting tabular data.
Leave Comment